<template>
  <div class="GoodsInfo" v-if="goodsImage.length > 0">
    <div class="media">
      <!-- 大图 -->
      <div
        class="large"
        :style="
          'background-image:url(' +
          (bgcUrl ? bgcUrl : goodsImage[0]) +
          ');background-position:' +
          -maskLeft * 2 +
          'px ' +
          -maskTop * 2 +
          'px;display:' +
          none
        "
      ></div>
      <!-- 商品图片 -->
      <div class="goods_imgae">
        <!-- 左边大图 -->
        <div
          class="bigImage"
          @mouseenter="moveHandle(true)"
          @mouseleave="moveHandle(false)"
        >
          <img :src="bigImage ? bigImage : goodsImage[0]" alt="" />
          <!-- 蒙板 -->
          <div class="layer" ref="layer" v-show="mask"></div>
        </div>
        <!-- 右边小图片 -->
        <ul class="smallImge" id="smallImge">
          <li
            v-for="(item, index) in goodsImage"
            @mouseenter="currentImgeChange(item, index)"
            :class="{ move: currentImageIndex == index }"
            :key="index"
          >
            <img :src="item" alt="" />
          </li>
        </ul>
      </div>
      <!-- 商品销售 -->
      <div class="goods_sales">
        <ul>
          <li>
            <p>销量人气</p>
            <p>200+</p>
            <p>
              <i class="iconfont icon-task-filling"></i>
              销量人气
            </p>
          </li>
          <li>
            <p>商品评价</p>
            <p>400+</p>
            <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
          </li>
          <li>
            <p>收藏人气</p>
            <p>600+</p>
            <p><i class="iconfont icon-favorite-filling1"></i>收藏商品</p>
          </li>
          <li>
            <p>品牌信息</p>
            <p>苏宁电器</p>
            <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 右侧的信息和选择商品 -->
    <div class="spec">
      <div class="goods_name">{{ name }}</div>
      <div class="goods_desc">{{ desc }}</div>
      <div class="priceAll">
        <span class="price">￥{{ goods_price ? goods_price : price }}</span>
        <span class="oldPrice"
          >￥{{ goods_oldPrice ? goods_oldPrice : oldPrice }}</span
        >
      </div>
      <div class="goods_service">
        <dl>
          <dt>促销</dt>
          <dd>12月好物放送，App领券购买直降120元</dd>
        </dl>
        <dl>
          <dt>促销</dt>
          <dd>12月好物放送，App领券购买直降120元</dd>
        </dl>
        <dl>
          <dt>服务</dt>
          <dd>
            <span>·</span>无忧退货 <span>·</span>快速退款 <span>·</span>免费包邮
            <span>了解详情</span>
          </dd>
        </dl>
      </div>
      <!-- <div class="specs">

        <ul class="specs_box">
          <li class="specs_warp" v-for="(item, index) in specs" :key="index">
            <div class="specs_left">{{ item.name }}</div>
            <ul class="specs_right">
              <li v-for="(items, i) in item.values" :key="i">
                <span v-if="!items.picture">{{ items.name }}</span>
                <img v-else :src="items.picture" alt="" />
              </li>
            </ul>
          </li>
        </ul>
      </div> -->
      <GoodsSku :goods="goods" @changes="changeSku" />
      <div class="amount">
        <div>数量</div>
        <p>
          <button @click="primaryHandle(-1)">-</button
          ><input type="text" v-model="primary" /><button
            @click="primaryHandle(1)"
          >
            +
          </button>
        </p>
      </div>
      <div class="primary" @click="addShopHandle">加入购物车</div>
    </div>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
import GoodsSku from "./GoodsSku.vue";
import { ref, reactive, toRefs, computed, watch, onMounted, refs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    goodsImage: {
      type: Array,
      default: [],
    },
    name: {
      type: String,
      default: "",
    },
    desc: {
      type: String,
      default: "",
    },
    oldPrice: {
      type: String,
      default: "0",
    },
    price: {
      type: String,
      default: "0",
    },
    skus: {
      type: Array,
      default: [],
    },
    specs: {
      type: Array,
      default: [],
    },
    goods: {
      type: Object,
      default: () => ({}),
    },
  },
  name: "GoodsInfo",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      bgcUrl: props.goodsImage[0],
      none: "none",
      left: 0,
      top: 0,
      bigImage: props.goodsImage[0],
      currentImageIndex: -1,
      primary: 1,
      mask: false,
      maskLeft: 0,
      maskTop: 0,
      goods_price: 0,
      goods_oldPrice: 0,

      /* 判断用户是否选择完规格 */
      flag: false,
      sku: {},
      /* 右侧图片切换 */
      currentImgeChange: (url, index) => {
        data.bigImage = url;
        data.bgcUrl = url;
        data.currentImageIndex = index;
      },

      /* 鼠标在左侧图片上移动时 */
      moveHandle: (bool) => {
        data.mask = bool;
        if (bool) {
          data.none = "";
          window.addEventListener("mousemove", data.maskMoveHandle);
        } else {
          data.none = "none";
          window.removeEventListener("mousemove", data.maskMoveHandle);
        }
      },
      /* 放大镜 */
      layer: ref("layer"),
      maskMoveHandle: (em) => {
        let { top, left } = data.layer.parentNode.getBoundingClientRect();
        // console.log(
        //   "这是盒子的上边距" + top,
        //   "这是盒子的左边距" + left,
        //   "这是鼠标的X轴位置" + em.clientX,
        //   "这是鼠标的Y轴位置" + em.clientY
        // );
        // console.log(Math.round(em.clientY - top));
        data.maskLeft = Math.round(em.clientX - left) - 100;
        data.maskTop = Math.round(em.clientY - top) - 100;
        if (data.maskLeft <= 0) {
          data.maskLeft = 0;
        } else if (
          data.maskLeft >=
          data.layer.parentNode.offsetWidth - data.layer.offsetWidth
        ) {
          data.maskLeft =
            data.layer.parentNode.offsetWidth - data.layer.offsetWidth;
        }
        if (data.maskTop <= 0) {
          data.maskTop = 0;
        } else if (
          data.maskTop >=
          data.layer.parentNode.offsetHeight - data.layer.offsetHeight
        ) {
          data.maskTop =
            data.layer.parentNode.offsetHeight - data.layer.offsetHeight;
        }
        data.layer.style.left = data.maskLeft + "px";
        data.layer.style.top = data.maskTop + "px";
      },

      /* 商品数量加减 */
      primaryHandle: (num) => {
        data.primary += num;
        if (data.primary <= 1) {
          data.primary = 1;
        }
      },
      /* 添加购物车 */
      addShopHandle: () => {
        // 首先清除定时器
        // 1、先判断用户是否选择完规格
        if (
          !(JSON.parse(localStorage.getItem("vuex"))
            ? JSON.parse(localStorage.getItem("vuex")).userInfo.token
            : false)
        ) {
          router.push(`/login?redirectUrl=/product/${route.params.id}`);
          return false;
        }
        if (data.flag) {
          ElMessage({
            message: "加入购物车成功",
            type: "success",
          });
          store.commit("addShopHandle", {
            count: data.primary,
            id: props.goods.id,
            name: props.goods.name,
            isChecked: true,
            picture: props.goods.mainPictures[0],
            selected: true,
            specs: [],
            ...data.sku,
          });
        } else {
          ElMessage({
            message: "请选择完整规格",
            type: "warning",
          });
        }
        // 2、如果选择完就添加本地，没有就提示
      },
    });
    watch(
      () => props.goodsImage[0],
      (n, o) => {
        data.currentImageIndex = -1;
        data.bigImage = n;
      },
      { immediate: true }
    );
    const changeSku = (sku) => {
      if (sku.skuId) {
        data.flag = true;
        data.goods_price = sku.price;
        data.goods_oldPrice = sku.oldPrice;
        data.sku = sku;
      } else {
        data.flag = false;
      }
    };
    return { ...toRefs(data), changeSku };
  },
  components: {
    GoodsSku,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.GoodsInfo {
  width: 1240px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  position: relative;
  .media {
    /* 左侧图片 */
    width: 580px;
    height: 600px;
    padding: 30px 50px;
    position: relative;
    // /* 放大镜 */
    .large {
      position: absolute;
      width: 400px;
      height: 400px;
      top: 30px;
      left: 464px;
      background-color: #fff;
      z-index: 99999;
      background-repeat: no-repeat;
      background-size: 200%;
    }
    .goods_imgae {
      display: flex;

      .bigImage {
        width: 400px;
        height: 400px;
        background: #f5f5f5;
        position: relative;
        cursor: move;
        /* 图片移入 */
        .layer {
          width: 200px;
          height: 200px;
          background-color: #999;
          opacity: 0.2;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .smallImge {
        flex: 1;
        li {
          width: 68px;
          height: 68px;
          margin-left: 12px;
          margin-bottom: 15px;
          cursor: pointer;
          border: 2px solid transparent;
          &.move {
            border-color: var(--color);
          }
          img {
            width: 100%;
          }
        }
      }
    }
    /* 图片下方的销售 */
    .goods_sales {
      ul {
        display: flex;
        li {
          width: 100px;
          text-align: center;
          font-size: 14px;
          position: relative;
          & ~ li:nth-child(n-1):before {
            content: "";
            position: absolute;
            width: 1px;
            height: 60px;
            left: 0;
            background-color: #e4e4e4;
            top: 10px;
          }
          i {
            color: var(--color);
            font-size: 14px;
            margin-right: 2px;
            &.icon-task-filling {
              margin-right: -3px;
            }
          }
          p:nth-child(2) {
            color: #cf4444;
            margin: 10px 0;
          }
          P:nth-child(1) {
            color: #999;
          }
        }
      }
    }
  }
  .spec {
    /* 右侧规格 */
    flex: 1;
    padding: 30px 30px 30px 0;
    /* 名字 */
    .goods_name {
      font-size: 22px;
    }
    /* 描述 */
    .goods_desc {
      margin-top: 10px;
      font-size: 14px;
      color: #999;
    }
    /* 价格 */
    .priceAll {
      margin-top: 10px;
      .price {
        color: #cf4444;
        font-size: 22px;
        margin-right: 10px;
      }
      .oldPrice {
        color: #999;
        text-decoration: line-through;
      }
    }
    /* 促销 配送 服务 */
    .goods_service {
      width: 500px;
      margin-top: 10px;
      padding: 20px 10px 0;
      background-color: #f5f5f5;
      dl {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        font-size: 14px;
        dt {
          color: #999;
          width: 50px;
        }
        dd {
          color: #666;
        }
      }
    }
    .specs {
      margin: 20px 0;
      .specs_box {
        width: 100%;
        .specs_warp {
          display: flex;
          align-items: center;
          padding-left: 10px;
          font-size: 14px;
          width: 100%;
          margin-bottom: 10px;
          .specs_left {
            width: 50px;
            color: #999;
          }
          .specs_right {
            display: flex;
            flex-wrap: wrap;
            flex: 1;

            span {
              display: block;
              border: 1px solid #e4e4e4;
              padding: 5px 20px;
              margin: 0px 10px 10px 0;
              cursor: pointer;
            }
            img {
              width: 60px;
              padding: 5px;
              border: 1px solid #e4e4e4;
              margin-right: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .amount {
      display: flex;
      align-items: center;
      color: #999;
      padding-left: 10px;
      div {
        font-size: 14px;
        width: 50px;
      }
      p {
        width: 120px;
        height: 30px;
        border: 1px solid #e4e4e4;
        display: flex;
        align-items: center;
        input {
          outline: none;
          border: none;
          width: 60px;
          padding: 0 5px;
          text-align: center;
          color: #666;
        }
        button {
          cursor: pointer;
          width: 29px;
          line-height: 28px;
          background-color: #f8f8f8;
          border: none;
          outline: none;
        }
      }
    }
    /* 加入购物车按钮 */
    .primary {
      cursor: pointer;
      margin-top: 20px;
      background-color: var(--color);
      color: #fff;
      width: 180px;
      border-radius: 5px;
      text-align: center;
      line-height: 50px;
    }
  }
  /* 弹出层 */
  .message {
  }
}
</style>